<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>3. 形状 shape - 刚体 body | 被删的前端游乐场</title>
    <meta name="generator" content="VuePress 1.8.2">
    
    <meta name="description" content="Just playing around">
    
    <link rel="preload" href="/front-end-playground/assets/css/0.styles.6ad2a9ca.css" as="style"><link rel="preload" href="/front-end-playground/assets/js/app.1e2670bf.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/2.38d016d1.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/3.e3f029cb.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/78.8b618b5c.js" as="script">
    <link rel="stylesheet" href="/front-end-playground/assets/css/0.styles.6ad2a9ca.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/front-end-playground/" class="home-link router-link-active"><!----> <span class="site-name">被删的前端游乐场</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/front-end-playground/" class="nav-link">概述</a></div><div class="nav-item"><a href="/front-end-playground/front-end-basic/" class="nav-link">前端领域</a></div><div class="nav-item"><a href="/front-end-playground/vue/" class="nav-link">Vue学习</a></div><div class="nav-item"><a href="/front-end-playground/wxapp/" class="nav-link">小程序学习</a></div><div class="nav-item"><a href="/front-end-playground/front-end-others/" class="nav-link router-link-active">百家齐放</a></div><div class="nav-item"><a href="/front-end-playground/front-end-addon/" class="nav-link">前端的进击</a></div><div class="nav-item"><a href="/front-end-playground/front-end-work/" class="nav-link">前端与工作</a></div><div class="nav-item"><a href="/front-end-playground/faq.html" class="nav-link">FAQ</a></div> <a href="https://github.com/godbasin/front-end-playground" target="_blank" rel="noopener noreferrer" class="repo-link">
    Github
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/front-end-playground/" class="nav-link">概述</a></div><div class="nav-item"><a href="/front-end-playground/front-end-basic/" class="nav-link">前端领域</a></div><div class="nav-item"><a href="/front-end-playground/vue/" class="nav-link">Vue学习</a></div><div class="nav-item"><a href="/front-end-playground/wxapp/" class="nav-link">小程序学习</a></div><div class="nav-item"><a href="/front-end-playground/front-end-others/" class="nav-link router-link-active">百家齐放</a></div><div class="nav-item"><a href="/front-end-playground/front-end-addon/" class="nav-link">前端的进击</a></div><div class="nav-item"><a href="/front-end-playground/front-end-work/" class="nav-link">前端与工作</a></div><div class="nav-item"><a href="/front-end-playground/faq.html" class="nav-link">FAQ</a></div> <a href="https://github.com/godbasin/front-end-playground" target="_blank" rel="noopener noreferrer" class="repo-link">
    Github
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>Angular框架解读</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>玩转 Angular</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>试试 Cycle.js</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>D3.js 和 Tree</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>试试 Three.js</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:10px;"><div class="kitty-main" data-v-2b653b36><span class="stand" data-v-2b653b36></span> <div class="cat" data-v-2b653b36><div class="body" data-v-2b653b36></div> <div class="head" data-v-2b653b36><div class="ear" data-v-2b653b36></div> <div class="ear" data-v-2b653b36></div></div> <div class="face" data-v-2b653b36><div class="nose" data-v-2b653b36></div> <div class="whisker-container" data-v-2b653b36><div class="whisker" data-v-2b653b36></div> <div class="whisker" data-v-2b653b36></div></div> <div class="whisker-container" data-v-2b653b36><div class="whisker" data-v-2b653b36></div> <div class="whisker" data-v-2b653b36></div></div></div> <div class="tail-container" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36></div></div></div></div></div></div></div></div></div></div> <p class="sidebar-heading open"><span>BOX2D.js 文档与教程</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/front-end-playground/front-end-others/box2d-tutorial/1-0-basic-catalog.html" class="sidebar-link">1. 基本概念</a></li><li><a href="/front-end-playground/front-end-others/box2d-tutorial/2-0-world.html" class="sidebar-link">2. 物理世界</a></li><li><a href="/front-end-playground/front-end-others/box2d-tutorial/3-0-shape-and-body.html" aria-current="page" class="active sidebar-link">3. 形状 shape - 刚体 body</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-others/box2d-tutorial/3-0-shape-and-body.html#形状-刚体" class="sidebar-link">形状-刚体</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-others/box2d-tutorial/3-0-shape-and-body.html#形状" class="sidebar-link">形状</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-others/box2d-tutorial/3-0-shape-and-body.html#矩形" class="sidebar-link">矩形</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-others/box2d-tutorial/3-0-shape-and-body.html#圆形" class="sidebar-link">圆形</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-others/box2d-tutorial/3-0-shape-and-body.html#凸多边形" class="sidebar-link">凸多边形</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-others/box2d-tutorial/3-0-shape-and-body.html#刚体" class="sidebar-link">刚体</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-others/box2d-tutorial/3-0-shape-and-body.html#由形状到刚体" class="sidebar-link">由形状到刚体</a></li></ul></li><li><a href="/front-end-playground/front-end-others/box2d-tutorial/4-0-joint.html" class="sidebar-link">4. 关节 joint</a></li><li><a href="/front-end-playground/front-end-others/box2d-tutorial/5-0-operation.html" class="sidebar-link">5. 操作 operation</a></li><li><a href="/front-end-playground/front-end-others/box2d-tutorial/6-1-create-and-init-world.html" class="sidebar-link">6-1. 创建世界并初始化</a></li><li><a href="/front-end-playground/front-end-others/box2d-tutorial/6-2-add-body.html" class="sidebar-link">6-2. 添加刚体</a></li><li><a href="/front-end-playground/front-end-others/box2d-tutorial/6-3-add-bound.html" class="sidebar-link">6-3. 添加边界</a></li><li><a href="/front-end-playground/front-end-others/box2d-tutorial/6-4-mouse-operate-body.html" class="sidebar-link">6-4. 鼠标操作刚体</a></li><li><a href="/front-end-playground/front-end-others/box2d-tutorial/6-5-handle-contact.html" class="sidebar-link">6-5. 处理碰撞刚体</a></li><li><a href="/front-end-playground/front-end-others/box2d-tutorial/7-0-api.html" class="sidebar-link">7. api</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><p>第三章介绍形状(shape)和刚体(body)，主要包括圆形、矩形、凸多边形，以及从形状到刚体。</p> <h2 id="形状-刚体"><a href="#形状-刚体" class="header-anchor">#</a> 形状-刚体</h2> <h3 id="形状-刚体-关节"><a href="#形状-刚体-关节" class="header-anchor">#</a> 形状-刚体-关节</h3> <p>创建了 box2d 世界后，我们需要创建一些刚体和关节添加进去，比如游戏中的边界、元素等，使得世界更丰富一些。</p> <p>接下来就创造一些基本形状，然后用这些形状组成刚体，刚体又可以进一步组合成关节，换言之，世界即是由刚体和关节组成的世界。</p> <p>box2d 中创建刚体、关节的过程类似于堆积木，由形状构成刚体，由刚体构成关节，稍微不同的地方是，这里的形状可以多次使用，其过程：
<code>形状 -&gt; 刚体 -&gt; 关节</code></p> <p>此处需要注意的是，box2d 只能创建顶点数不超过 8 的凸多边形。</p> <h2 id="形状"><a href="#形状" class="header-anchor">#</a> 形状</h2> <h3 id="关于"><a href="#关于" class="header-anchor">#</a> 关于</h3> <p>形状就是物体上的碰撞几何结构。另外形状也用于定义物体的质量。也就是说，你来指定密度，Box2D 可以帮你计算出质量。</p> <p>形状具有摩擦和恢复的性质。形状还可以携带筛选信息，使你可以防止某些游戏对象之间的碰撞。</p> <p>形状永远属于某物体，单个物体可以拥有多个形状。形状是抽象类，所以在 Box2D 中可以实现许多类型的形状。如果你有勇气，那便可以实现出自己的形状类型(和碰撞算法)。</p> <h3 id="形状性质"><a href="#形状性质" class="header-anchor">#</a> 形状性质</h3> <ul><li>摩擦和恢复</li></ul> <p>摩擦可以使对象逼真地沿其它对象滑动。Box2D 支持静摩擦和动摩擦，但使用相同的参数。</p> <p>摩擦在 Box2D 中会被正确地模拟，并且摩擦力的强度与正交力(称之为库仑摩擦)成正比。摩擦参数经常会设置在 0 到 1 之间，0 意味着没有摩擦，1 会产生强摩擦。
当计算两个形状之间的摩擦时，Box2D 必须联合两个形状的摩擦参数。</p> <p>恢复可以使对象弹起，想象一下，在桌面上方丢下一个小球。恢复的值通常设置在 0 到 1 之间，0 的意思是小球不会弹起，这称为非弹性碰撞；1 的意思是小球的速度会得到精确的反射，这称为完全弹性碰撞。</p> <p>当一个形状发生多碰撞时，恢复会被近似地模拟。这是因为 Box2D 使用了迭代求解器。当冲撞速度很小时，Box2D 也会使用非弹性碰撞，这是为了防止抖动。</p> <ul><li>密度</li></ul> <p>Box2D 可以根据附加形状的质量分配来计算物体的质量以及转动惯量。</p> <p>直接指定物体质量常常会导致不协调的模拟。因此，推荐的方法是使用 b2Body 来根据形状设置质量。</p> <h3 id="形状定义"><a href="#形状定义" class="header-anchor">#</a> 形状定义</h3> <p>形状定义用于创建形状。通用的形状数据会保存在 b2ShapeDef 中，特殊的形状数据会保存在其派生类中。</p> <ul><li><p><code>b2ShapeDef</code></p> <ul><li>type 来表示形状类型</li> <li>userdata 表示用户数据</li> <li>localPosition 来表示当前位置</li> <li>localRotation 来表示当前角度</li> <li>friction、density、restitution 来表示摩擦力、密度、弹性系数</li> <li>categoryBits 和 maskBits 来表示碰撞位及位标识（可以用来过滤一些碰撞）</li> <li>groupIndex 来表示组号，这个组号可以用来过滤还比位标识优先</li></ul></li> <li><p><code>b2CircleDef</code></p> <ul><li>继承于 b2ShapeDef</li> <li>type 为 e_circleShape</li> <li>radius 来表示半径值</li></ul></li> <li><p><code>b2BoxDef</code></p> <ul><li>继承于 b2ShapeDef</li> <li>type 为 e_ boxShape</li> <li>extents 来表示区域值</li></ul></li> <li><p><code>b2PolyDef</code></p> <ul><li>继承于 b2ShapeDef</li> <li>type 为 e_ polyShape</li> <li>vertices 来表示顶点</li> <li>vertexCount 来表示顶点数，目前顶点数最多支持 8 个</li></ul></li></ul> <h2 id="矩形"><a href="#矩形" class="header-anchor">#</a> 矩形</h2> <h3 id="b2boxdef"><a href="#b2boxdef" class="header-anchor">#</a> b2BoxDef</h3> <p>使用基类 b2BoxDef 创建一个矩形形状，并且设置其大小、密度、弹性、摩擦力等属性。</p> <ul><li><code>b2BoxDef</code> <ul><li>继承于 b2ShapeDef</li> <li>type 为 e_ boxShape</li> <li>extents 来表示区域值</li></ul></li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> Shape <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">b2BoxDef</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//创建一个形状Shape，然后设置有关Shape的属性</span>
Shape<span class="token punctuation">.</span>extents<span class="token punctuation">.</span><span class="token function">Set</span><span class="token punctuation">(</span><span class="token number">1200</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//设置矩形高、宽,</span>
Shape<span class="token punctuation">.</span>density <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token comment">//设置矩形的密度</span>
Shape<span class="token punctuation">.</span>restitution <span class="token operator">=</span> <span class="token number">0.3</span><span class="token punctuation">;</span> <span class="token comment">//设置矩形的弹性</span>
Shape<span class="token punctuation">.</span>friction <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> <span class="token comment">//设置矩形的摩擦因子，可以设置为0-1之间任意一个数，0表示光滑，1表示强摩擦</span>
</code></pre></div><p>备注：如果将密度设置为 0 或者 null，那么该形状是静止，即不可被移动的地面或者墙体等。</p> <h2 id="圆形"><a href="#圆形" class="header-anchor">#</a> 圆形</h2> <h3 id="b2circledef"><a href="#b2circledef" class="header-anchor">#</a> b2CircleDef</h3> <p>使用基类 b2CircleDef 创建一个圆形形状，并且设置其属性。</p> <ul><li><code>b2CircleDef</code> <ul><li>继承于 b2ShapeDef</li> <li>type 为 e_circleShape</li> <li>radius 来表示半径值</li></ul></li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> Shape <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">b2CircleDef</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//创建一个圆形Shape，然后设置有关Shape的属性</span>
Shape<span class="token punctuation">.</span>radius <span class="token operator">=</span> <span class="token number">20</span><span class="token punctuation">;</span> <span class="token comment">//设置圆形的半径</span>
Shape<span class="token punctuation">.</span>localPosition<span class="token punctuation">.</span><span class="token function">Set</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//设置圆形的偏移量</span>
Shape<span class="token punctuation">.</span>density <span class="token operator">=</span> <span class="token number">1.0</span><span class="token punctuation">;</span> <span class="token comment">//设置圆形的密度</span>
Shape<span class="token punctuation">.</span>restitution <span class="token operator">=</span> <span class="token number">0.3</span><span class="token punctuation">;</span> <span class="token comment">//设置圆形的弹性</span>
Shape<span class="token punctuation">.</span>friction <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> <span class="token comment">//设置圆形的摩擦因子</span>
</code></pre></div><h2 id="凸多边形"><a href="#凸多边形" class="header-anchor">#</a> 凸多边形</h2> <h3 id="b2polydef"><a href="#b2polydef" class="header-anchor">#</a> b2PolyDef</h3> <p>使用基类 b2PolyDef 创建一个多边形形状，并且设置其属性。</p> <ul><li><code>b2PolyDef</code> <ul><li>继承于 b2ShapeDef</li> <li>type 为 e_ polyShape</li> <li>vertices 来表示顶点</li> <li>vertexCount 来表示顶点数，目前顶点数最多支持 8 个</li></ul></li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> Shape <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">b2PolyDef</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//创建一个多边形Shape，然后设置有关Shape的属性</span>
Shape<span class="token punctuation">.</span>vertexCount <span class="token operator">=</span> <span class="token number">5</span><span class="token punctuation">;</span> <span class="token comment">//设置多边形的顶点数，这里设置为5，意味着Shape是个五边形</span>
Shape<span class="token punctuation">.</span>vertices<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">b2Vec2</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//分别定义五个顶点的坐标</span>
Shape<span class="token punctuation">.</span>vertices<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">b2Vec2</span><span class="token punctuation">(</span><span class="token number">25</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
Shape<span class="token punctuation">.</span>vertices<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">b2Vec2</span><span class="token punctuation">(</span><span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
Shape<span class="token punctuation">.</span>vertices<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">b2Vec2</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
Shape<span class="token punctuation">.</span>vertices<span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">b2Vec2</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">25</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
Shape<span class="token punctuation">.</span>localPosition<span class="token punctuation">.</span><span class="token function">Set</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//设置多边形的偏移量</span>
Shape<span class="token punctuation">.</span>density <span class="token operator">=</span> <span class="token number">1.0</span><span class="token punctuation">;</span> <span class="token comment">//设置多边形的密度</span>
Shape<span class="token punctuation">.</span>restitution <span class="token operator">=</span> <span class="token number">0.3</span><span class="token punctuation">;</span> <span class="token comment">//设置多边形的弹性</span>
Shape<span class="token punctuation">.</span>friction <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> <span class="token comment">//设置多边形的摩擦因子</span>
</code></pre></div><p>注意：box2d 只能创建顶点数不超过 8 的凸多边形。</p> <p>多形状刚体中形状的偏移，在多个形状所组成的刚体中，所有形状的中心点都是刚体的初始位置，我们可以设置偏移量使形状偏移中心点。</p> <h2 id="刚体"><a href="#刚体" class="header-anchor">#</a> 刚体</h2> <h3 id="刚体定义-b2bodydef"><a href="#刚体定义-b2bodydef" class="header-anchor">#</a> 刚体定义(b2BodyDef)</h3> <p>在创建刚体之前你需要创建一个刚体定义(b2BodyDef)。你可以把刚体定义创建在栈上，也可以在你的游戏数据结构中保存它们。这取决于你的选择。
Box2D 会从刚体定义中拷贝出数据，这意味着你可以循环使用一个刚体定义去创建多个刚体。</p> <ul><li>质量性质</li></ul> <p>有多种建立刚体质量性质的方法：</p> <ol><li>在刚体定义中显式地设置</li> <li>显式地在刚体上设置(在其创建之后)</li> <li>基于刚体上形状之密度设置
在很多游戏环境中，根据形状密度计算质量是有意义的。这能帮助确保刚体有合理和一致的质量。然而，其它游戏环境可能需要指定质量值。例如，可能你有一个机械装置，需要一个精确的质量。</li></ol> <ul><li>位置和角度</li></ul> <p>物体定义为你提供了一个在创建时初始化位置的机会，这要比在世界原点创建物体而后移动它到某个位置更具性能。</p> <p>一个物体上主要有两个令人感兴趣的点。其中一个是物体的原点，形状和关节都相对于物体的原点而被附加。另一个点是物体的质心。质心取决于物体上形状的质量分配，或显式地由 b2MassData 设置。
Box2D 内部的许多计算都要使用物体的质心，例如 b2Body 会存储质心的线速度。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>bodyDef<span class="token punctuation">.</span>position<span class="token punctuation">.</span><span class="token function">Set</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 设置刚体的初始位置</span>
</code></pre></div><p>当你构造物体定义的时候，可能你并不知道质心在哪里，因此你会指定物体的原点。你可能也会以弧度指定物体的角度，角度并不受质心位置的影响。
如果随后你改变了物体的质量性质，那么质心也会随之移动，但是原点以及物体上的形状和关节都不会改变。</p> <ul><li>阻尼</li></ul> <p>阻尼用于减小物体在世界中的速率。阻尼与摩擦是不同的，因为摩擦仅在物体有接触的时候才会发生，而阻尼的模拟要比摩擦便宜多了。然而，阻尼并不能取代摩擦，往往这两个效果需要同时使用。</p> <p>阻尼参数的范围可以在 0 到无穷之间，0 的就是没有阻尼，无穷就是满阻尼。通常来说，阻尼的值应该在 0 到 0.1 之间，我通常不使用线性阻尼，因为它会使物体看起来发飘。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>bodyDef<span class="token punctuation">.</span>linearDamping <span class="token operator">=</span> <span class="token number">0.0</span><span class="token punctuation">;</span>
bodyDef<span class="token punctuation">.</span>angularDamping <span class="token operator">=</span> <span class="token number">0.01</span><span class="token punctuation">;</span>
</code></pre></div><p>阻尼相似于稳定性与性能，阻尼值较小的时候阻尼效应几乎不依赖于时间步，而阻尼值较大的时候阻
尼效应将随着时间步而变化。</p> <ul><li>休眠参数</li></ul> <p>休眠是什么意思？好的。模拟物体的成本是高昂的，所以如果物体更少，那模拟的效果就能更好。当一个物体停止了运动时，我们喜欢停止去模拟它。</p> <p>当 Box2D 确定一个物体(或一组物体)已经停止移动时，物体就会进入休眠状态，消耗很小的 CPU 开销。如果一个醒着的物体接触到了一个休眠中的物体，那么休眠中的物体就会醒来。当物体上的关节或触点被摧毁的时候，它们同样会醒来。你也可以手动地唤醒物体。
通过物体定义，你可以指定一个物体是否可以休眠，或者创建一个休眠的物体。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>bodyDef<span class="token punctuation">.</span>allowSleep <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
bodyDef<span class="token punctuation">.</span>isSleeping <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="由形状到刚体"><a href="#由形状到刚体" class="header-anchor">#</a> 由形状到刚体</h2> <h3 id="b2bodydef"><a href="#b2bodydef" class="header-anchor">#</a> b2BodyDef</h3> <p>之前虽然创建了形状，但是这些形状并不会直接在世界里面显示出来。</p> <p>下面利用这些形状来组成一些刚体，然后把它们放入到世界里面去。</p> <p>首先，利用 b2BodyDef 创建一个刚体，然后设置刚体的初始位置并加入之间已创建的形状，然后使用 CreateBody 将刚体放入到世界里面，这样就可以看到一些模拟刚体了。</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> BodyDef <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">b2BodyDef</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 利用b2BodyDef类创建一个刚体</span>
BodyDef<span class="token punctuation">.</span>position<span class="token punctuation">.</span><span class="token function">Set</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">600</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 设置刚体的初始位置，这里把BodyDef放在（0，600）</span>
BodyDef<span class="token punctuation">.</span><span class="token function">AddShape</span><span class="token punctuation">(</span>Shape<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 在刚体BodyDef中加入形状Shape</span>
Body <span class="token operator">=</span> world<span class="token punctuation">.</span><span class="token function">CreateBody</span><span class="token punctuation">(</span>BodyDef<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 把刚体BodyDef放到world中</span>
</code></pre></div></div> <!----> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/godbasin/front-end-playground/edit/sourcecode/docs/front-end-others/box2d-tutorial/3-0-shape-and-body.md" target="_blank" rel="noopener noreferrer">帮阿猪改善此页面！</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----> <blockquote>部分文章中使用了一些网站的截图，如果涉及侵权，请告诉我删一下谢谢~</blockquote> <div style="margin-top:30px;"><div class="el-row" style="margin-left:-10px;margin-right:-10px;"><div class="el-col el-col-24 el-col-sm-0 el-col-md-2 el-col-lg-4" style="padding-left:10px;padding-right:10px;display:block;"><div style="width:1px;height:1px;"></div></div> <div class="el-col el-col-24 el-col-sm-24 el-col-md-18 el-col-lg-16" style="padding-left:10px;padding-right:10px;"><div class="el-card box-card is-always-shadow"><div class="el-card__header"><div class="clearfix"><span>温馨提示喵</span></div></div><div class="el-card__body"> <div class="el-row" style="margin-left:-10px;margin-right:-10px;"><div class="el-col el-col-24 el-col-xs-24 el-col-sm-12" style="padding-left:10px;padding-right:10px;"><div class="el-image"><div class="image-slot"><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/assets/img/loading.gif" style="width:100%;"></div><!----></div></div> <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12" style="padding-left:10px;padding-right:10px;"><div class="copyright-text"><div>本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。</div> <div>出处：被删的前端游乐场</div> <div>作者：<a href="https://github.com/godbasin" target="_blank">被删</a></div></div></div></div></div></div></div></div></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/front-end-playground/front-end-others/box2d-tutorial/2-0-world.html" class="prev">
          2. 物理世界
        </a></span> <span class="next"><a href="/front-end-playground/front-end-others/box2d-tutorial/4-0-joint.html">
          4. 关节 joint
        </a>
        →
      </span></p></div>  <div class="gitalk-container theme-default-content"><div id="gitalk-container" class="content"></div></div></main> <div id="kitty-container"><span><div role="tooltip" id="el-popover-2330" aria-hidden="true" class="el-popover el-popper" style="width:undefinedpx;display:none;"><!----><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/2code2.jpg" class="image"> <div class="text">牡羊猪的猫粮罐</div> </div><span class="el-popover__reference-wrapper"><div id="kitty" style="background:url(https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/assets/img/kitty1.svg);"></div></span></span> <div class="el-dialog__wrapper" style="display:none;"><div role="dialog" aria-modal="true" aria-label="牡羊猪是这样渐渐胖成猪的喵（点击图片可以切换噢）" class="el-dialog" style="margin-top:15vh;"><div class="el-dialog__header"><span class="el-dialog__title">牡羊猪是这样渐渐胖成猪的喵（点击图片可以切换噢）</span><button type="button" aria-label="Close" class="el-dialog__headerbtn"><i class="el-dialog__close el-icon el-icon-close"></i></button></div><!----><!----></div></div></div></div><div class="global-ui"></div></div>
    <script src="/front-end-playground/assets/js/app.1e2670bf.js" defer></script><script src="/front-end-playground/assets/js/2.38d016d1.js" defer></script><script src="/front-end-playground/assets/js/3.e3f029cb.js" defer></script><script src="/front-end-playground/assets/js/78.8b618b5c.js" defer></script>
  </body>
</html>
